<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <style>
    th,td{
        border: 1px solid #000;
        text-align: center;
    }
  </style>
  <body>
    <div id="app">
        <textarea v-model="text"></textarea>
        <button @click="add(text)">发布评论</button>
        <table cellpadding='5'>
            <thead>
                <th>游客</th>
                <th>评论</th>
                <th>点赞数</th>
                <th>发布日期</th>
                <th colspan="3">操作</th>
            </thead>
            <tbody>
                <tr v-for="(o,i) in list">
                    <td>再试试吧</td>
                    <td>{{o.text}}</td>
                    <td>{{o.good}}</td>
                    <td>{{o.date}}</td>
                    <td><button @click="good(i)">点赞</button></td>
                    <td><button @click="top(i)">置顶</button></td>
                    <td><button @click="del(i)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
  </body>
</html>